<template>
    <div class="file-distribution-container">
        <div class="header">
            <div class="header-left">
                <router-link to="/main/xingzheng/gudingzichan" class="back-btn">
                    <i class="el-icon-arrow-left">返回</i>
                </router-link>
                <div class="save-info">
                    <el-button type="primary" icon="el-icon-check" @click="saveRecord">保存</el-button>
                    <el-button type="info" icon="el-icon-printer" @click="printForm">打印</el-button>
                </div>
            </div>
            <h2 style="text-align: center;">文件发放与回收记录</h2>
            <div class="file-info">
                <div @dblclick="editFileNumber = true">
                    <span v-if="!editFileNumber">文件编号：{{ fileNumber }}</span>
                    <input v-else type="text" v-model="fileNumber" @blur="editFileNumber = false"
                        @keyup.enter="editFileNumber = false" placeholder="请输入文件编号">
                </div>

                <div class="add-department">
                    <input type="text" v-model="newDepartment" placeholder="请输入新部门名称">
                    <button @click="addDepartment">添加部门</button>
                </div>

                <div @dblclick="editFileName = true">
                    <span v-if="!editFileName">文件名称：{{ fileName }}</span>
                    <input v-else type="text" v-model="fileName" @blur="editFileName = false"
                        @keyup.enter="editFileName = false" placeholder="请输入文件名称">
                </div>
            </div>
            <table class="distribution-table">
                <thead>
                    <tr>
                        <th rowspan="2">序号</th>
                        <th rowspan="2">分发部门</th>
                        <th rowspan="2">分发编号</th>
                        <th colspan="4">文件发放记录</th>
                        <th colspan="2">文件回收记录</th>
                        <th rowspan="2">备注</th>
                    </tr>
                    <tr>
                        <th>版本</th>
                        <th>份数</th>
                        <th>接收人</th>
                        <th>日期</th>
                        <th>回收人</th>
                        <th>日期</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in distributionList" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.distributionDepartment }}</td>
                        <td>{{ item.distributionNumber }}</td>
                        <td @dblclick="startEditingVersion(index)">
                            <span v-if="!item.editingVersion">{{ item.version }}</span>
                            <input v-else type="text" v-model="item.version" @blur="stopEditingVersion(index)"
                                @keyup.enter="stopEditingVersion(index)" placeholder="请输入版本">
                        </td>
                        <td @dblclick="startEditingCopyNumber(index)">
                            <span v-if="!item.editingCopyNumber">{{ item.copyNumber }}</span>
                            <input v-else type="number" v-model="item.copyNumber" @blur="stopEditingCopyNumber(index)"
                                @keyup.enter="stopEditingCopyNumber(index)" placeholder="请输入份数">
                        </td>
                        <td>
                            <input type="text" v-model="item.receiver" />
                        </td>
                        <td>
                            <input type="date" v-model="item.receiveDate" />
                        </td>
                        <td>
                            <input type="text" v-model="item.collector" />
                        </td>
                        <td>
                            <input type="date" v-model="item.collectDate" />
                        </td>
                        <td><input type="text" v-model="item.remark" /></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
export default {
    name: 'FileDistributionRecord',
    data() {
        return {
            fileNumber: 'AM-F-JY-05',
            fileName: '固定资产核算流程',
            distributionList: [
                {
                    distributionDepartment: '总经理室',
                    distributionNumber: '01',
                    version: 'B/0',
                    copyNumber: '1',
                    receiver: '',
                    receiveDate: '',
                    collector: '',
                    collectDate: '',
                    remark: '',
                    editingVersion: false,
                    editingCopyNumber: false
                },
                {
                    distributionDepartment: '管理者代表',
                    distributionNumber: '02',
                    version: 'B/0',
                    copyNumber: '1',
                    receiver: '',
                    receiveDate: '',
                    collector: '',
                    collectDate: '',
                    remark: '',
                    editingVersion: false,
                    editingCopyNumber: false
                },
            ],
            newDepartment: '',
            editFileNumber: false,
            editFileName: false
        };
    },
    methods: {
        printForm() {
            window.print();
        },
        addDepartment() {
            if (this.newDepartment.trim() !== '') {
                const newItem = {
                    distributionDepartment: this.newDepartment,
                    distributionNumber: (this.distributionList.length + 1).toString().padStart(2, '0'),
                    version: 'B/0',
                    copyNumber: '1',
                    receiver: '',
                    receiveDate: '',
                    collector: '',
                    collectDate: '',
                    remark: '',
                    editingVersion: false,
                    editingCopyNumber: false
                };
                this.distributionList.push(newItem);
                this.newDepartment = '';
            }
        },
        saveRecord() {
            console.log('保存文件发放与回收记录', {
                fileNumber: this.fileNumber,
                fileName: this.fileName,
                distributionList: this.distributionList
            });
        },
        startEditingVersion(index) {
            this.distributionList[index].editingVersion = true;
        },
        stopEditingVersion(index) {
            this.distributionList[index].editingVersion = false;
        },
        startEditingCopyNumber(index) {
            this.distributionList[index].editingCopyNumber = true;
        },
        stopEditingCopyNumber(index) {
            this.distributionList[index].editingCopyNumber = false;
        }
    }
};
</script>

<style scoped lang="scss">
.file-distribution-container {
    font-family: '宋体', sans-serif;
    padding: 20px;
    height: calc(100vh - 40px);
}

.header {
    width: 1200px;
    margin: 0 auto;
}

.file-info {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #409EFF;

    i {
        // font-size: 20px;
        color: #409EFF;
    }
}

.add-department {
    // margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

.distribution-table {
    width: 100%;
    border-collapse: collapse;
}

.distribution-table th,
.distribution-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

.save-info {
    margin-top: 15px;
    display: flex;
    justify-content: end;
    align-items: center;
}

@media print {
    .header {
        // width: 800px;
        margin: 0px;
    }

    .header-left {
        display: none;
    }

    .add-department {
        display: none;
    }

    table {
        margin: 10px 0px;
    }

    .info-table,
    .content-table,
    .approval-table {
        border: 1px solid #000;

        td,
        th {
            border: 1px solid #000;
        }
    }

    td,
    th {
        padding: 5px;
        border: 1px solid #000;
        white-space: nowrap;
    }

    input {
        border: none !important;
        background-color: transparent !important;
        text-align: center;
    }

    textarea {
        border: 0px !important;
    }
}
</style>